var btn = document.querySelector('footer button');
// querySelector：
// 给button添加点击事件；onclick：点击
var count = 0 ;
btn.onclick = function () {
    count ++;
    console.log(count);
    // 1,获取用户的输入信息：input的值，querySelector：查询
    var input = document.querySelector('footer input')
     // value:值的意思（这里是定义的名字）
    var value = input.value;
    console.log(value);
    // 2,在container显示用户输入：

    //2.1)创建每一格： getElementById:通过ID找到标签；createElement：创建新的标签
    var cell = document.createElement('div');
    // 找到容器标签:
    var container = document.getElementById('container');
    // 把这格添加到容器中：X.appendChild()：把一个标签添加到另一个标签里;X:父元素（）：子元素
    container.appendChild(cell);

    // 2.2)创建一个头像添加到这一格：
    var photo = document.createElement('img');
    // 根据点击次数分奇偶使用不同的图片
    // photo.setAttribute('src','img/JPG.png');
    photo.src = count%2 ==0? 'img/JPG.png':'img/touxiang.png'
    // 设置图片头像样式：
    photo.style.width = '40px';
    photo.style.height = '40px';
    photo.style.borderRadius = '20px';
    
    photo.style.float = count%2==0? 'right':'left';
    cell.appendChild(photo);
   

    // 添加文本展示：
    // 创建一个新的div：
    var contentDiv = document.createElement('div');
    // 把输入框的值赋值给新建的div
    contentDiv.innerHTML = value;

    contentDiv.style.paddingTop = '10px';
    contentDiv.style.maxWidth = 'calc(100% - 90px)';
    contentDiv.style.float = count%2==0? 'right':'left';
    contentDiv.style.wordWrap = 'break-word';
    contentDiv.style.wordBreak = 'break-all';
    cell.appendChild(contentDiv);


    // 添加空标签，清除浮动
    var clearDiv = document.createElement('div');
    clearDiv.style.clear = 'both';
    cell.appendChild(clearDiv);

    // 3,清空输入框：
    input.value = '';

    // 4,让body滚动到最大值
    console.log(container);
    // scrollTo:让某个标签滚动到某个位置
    // para1（para：参数）：x轴方向滚动到哪里
    // para2：y轴方向滚动到哪里
    // container.scrollHeight：内容的真实高度
    container.scrollTo(0,container.scrollHeight);

}



